<template>
  <view class="content">
    <view class="card">
      <picker-view
        v-if="visible"
        :indicator-style="indicatorStyle"
        :value="value"
        @change="bindChange"
        class="picker-view">
        <picker-view-column>
          <view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
        </picker-view-column>
      </picker-view>
    </view>
    <!-- <view class="btn">
      <button>取消</button>
      <button>确定</button>
    </view> -->
  </view>
</template>

<script>
import { nextTick } from 'vue';

export default {
  data: function () {
    const date = new Date();
    const years = [];
    const year = date.getFullYear();
    const months = [];
    const month = date.getMonth() + 1;
    const days = [];
    const day = date.getDate();
    const hours = [];
    const hour = date.getHours();
    const minutes = [];
    const minute = date.getMinutes();
    for (let i = 1997; i <= date.getFullYear(); i++) {
      years.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i);
    }
    // for (let i = 1; i <= 31; i++) {
    //   days.push(i);
    // }
    // for (let i = 1; i <= 24; i++) {
    //   hours.push(i);
    // }
    // for (let i = 1; i <= 60; i++) {
    //   minutes.push(i);
    // }
    return {
      title: 'picker-view',
      years,
      year,
      months,
      month,
      days,
      day,
      hours,
      hour,
      minutes,
      minute,
      value: [9999, month - 1, day - 1, hour - 1, minute - 1],
      visible: true,
      indicatorStyle: `height: 100upx;`,
    };
  },
  created: function () {
    this.setDays();
  },
  methods: {
    getDate: function () {
      return (
        this.year +
        '-' +
        (this.month > 9 ? this.month : '0' + this.month) +
        '-' +
        (this.day > 9 ? this.day : '0' + this.day)
      );
    },
    bindChange: function (e) {
      const val = e.detail.value;
      this.year = this.years[val[0]];
      this.month = this.months[val[1]];
      this.day = this.days[val[2]];
      this.hour = this.hours[val[3]];
      this.minute = this.minutes[val[4]];
      this.setDays();
      this.$emit(
        'change',
        this.year +
          '-' +
          (this.month > 9 ? this.month : '0' + this.month) +
          '-' +
          (this.day > 9 ? this.day : '0' + this.day),
      );
    },
    setDays: function () {
      let totalDays = '';
      let yearText = new Date().getFullYear();
      let monthText = new Date().getMonth() + 1;
      let yearMonth = yearText + '-' + monthText;
      let currentYearMonth = this.year + '-' + this.month;
      totalDays = new Date(this.year, this.month, 0).getDate();
      this.days = this.generateArray(1, totalDays);
      // this.$emit(
      //   'confirm',
      //   this.year +
      //     '-' +
      //     (this.month > 9 ? this.month : '0' + this.month) +
      //     '-' +
      //     (this.day > 9 ? this.day : '0' + this.day),
      // );
    },
    generateArray: function (start, end) {
      start = Number(start);
      end = Number(end);
      end = end > start ? end : start;
      return [...Array(end + 1).keys()].slice(start);
    },
  },
};
</script>

<style scoped>
.content {
  width: 750upx;
  /* height: 705upx; */
  background-color: #ffffff;
  opacity: 1;
  border-radius: 20upx 20upx 0upx 0upx;
  padding: 20upx 0 10upx;
}

.content > .card {
  width: 750upx;
  /* height: 505upx; */
}

.card > .picker-view {
  width: 630upx;
  height: 450upx;
  font-size: 28upx;
  margin: 0 60upx;
  text-align: center;
}

.picker-view /deep/ .item {
  line-height: 68upx;
}

.content > .btn {
  width: 750upx;
  height: 120upx;
  line-height: 120upx;
  display: flex;
  justify-content: space-around;
  margin-top: 40upx;
  /* border-top: 1upx solid #e5e5e5; */
}

.btn > button {
  font-size: 32upx;
  font-weight: 400;
  /* margin-top: 20upx; */
  border-radius: 64upx;
  width: 320upx;
  height: 100upx;
  line-height: 100upx;
  overflow: hidden;
}

.btn > button:nth-child(1) {
  background-color: #ededed;
  color: #333;
}

.btn > button:nth-child(2) {
  background-color: #ff0309;
  color: #ffffff;
}
</style>